import React, { useState } from 'react';
import { Layout, Button, Modal, Space } from 'antd';
import ReturnRecordList from './ReturnRecordList';
import ReturnRecordForm from './ReturnRecordForm';
import Search from 'antd/es/input/Search';

const { Header, Content, Footer } = Layout;


interface ReturnRecord {
    id: number;
    bookName: string;
    borrower: string;
    returnDate: string;
}

const Return: React.FC = () => {
    const [records, setRecords] = useState<ReturnRecord[]>([]);
    const [currentRecord, setCurrentRecord] = useState<ReturnRecord | null>(null);
    const [isModalVisible, setIsModalVisible] = useState(false);

    const handleAdd = () => {
        setCurrentRecord(null);
        setIsModalVisible(true);
    };

    const handleEdit = (record: ReturnRecord) => {
        setCurrentRecord(record);
        setIsModalVisible(true);
    };

    const handleDelete = (id: number) => {
        setRecords(records.filter(record => record.id !== id));
    };

    const handleSave = (record: ReturnRecord) => {
        if (currentRecord) {
            setRecords(records.map(r => (r.id === currentRecord.id ? { ...record, id: currentRecord.id } : r)));
        } else {
            setRecords([...records, { ...record, id: Date.now() }]);
        }
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <div>
            <Space style={{ marginBottom: '20px' }}>
                <Search
                    placeholder="搜索书名或借阅人"
                    style={{ width: 300, marginRight: 16 }}
                />
                {/* <Button type="primary" onClick={handleAdd}>
                    添加记录
                </Button> */}

            </Space>
            <ReturnRecordList records={records} onEdit={handleEdit} onDelete={handleDelete} />
            <Modal
                title={currentRecord ? '编辑记录' : '添加记录'}
                visible={isModalVisible}
                footer={null}
                onCancel={handleCancel}
            >
                <ReturnRecordForm record={currentRecord} onSave={handleSave} onCancel={handleCancel} />
            </Modal>

        </div>
    );
};

export default Return;